<template>
	<view class="custom_good_button">
		<view class="item_button iconfont icon-good on" v-if="isGood" @click="cancelGoodHandle"></view>
		<view class="item_button iconfont icon-good" v-else @click="addGoodHandle"></view>
	</view>
</template>

<script>
export default {
	name: 'custom-good-button',
	props: {
		item: {
			type: Object,
			default() {
				return {};
			}
		}
	},
	data() {
		return {
			isGood: false,
			loading: false
		};
	},
	created() {
		this.isGood = this.$props.item.isGood || this.isGood;
	},
	methods: {
		addGoodHandle(){
			let that = this;
			if (!this.loading){
				this.loading = true;
				this.$store.dispatch('addGood', {newsId:this.$props.item.newsId}).then(res=>{
					that.isGood = true;
				}).catch(err=>{
					console.log(err)
				}).finally(()=>{
					that.loading = false;
				})
			}
		},
		cancelGoodHandle(){
			let that = this;
			if (!this.loading){
				this.loading = true;
				this.$store.dispatch('deleteGood', {newsId:this.$props.item.newsId}).then(res=>{
					that.isGood = false;
				}).catch(err=>{
					console.log(err)
				}).finally(()=>{
					that.loading = false;
				})
			}
		}
	}
};
</script>

<style lang="less">
.custom_good_button {
	display: flex;
	align-items: center;
	.item_button {
		margin: 0 10rpx;
		&.iconfont {
			font-size: 48rpx;
			&.on {
				color: #4cd964;
			}
		}
	}
	.text {
		font-size: 24rpx;
	}
}
</style>
